<!-- elementui.vue 2023/4/18 @wanghaoran -->
<template>
  <div class="flex flex-col items-center">
    <div>
      <el-button type="danger" :icon="Delete" circle/>
      <el-icon>
        <Plus/>
      </el-icon>
      <el-icon>
        <CirclePlus/>
      </el-icon>
      <el-icon>
        <Tickets/>
      </el-icon>
    </div>

    <div class="text-2xl font-bold m-1">按钮</div>
    <el-button text @click="dialogVisible = true">
      打开dialog
    </el-button>
    <div class="text-2xl font-bold m-1">表格1</div>

    <el-table :data="tableData1" fit style="width: 500px">
      <el-table-column prop="date" label="Date"/>
      <el-table-column prop="name" label="Name"/>
      <el-table-column prop="address" label="Address"/>
    </el-table>
    <div class="text-2xl font-bold m-1">表格2</div>
    <el-table ref="table2Ref" style="width: 700px;" :data="tableData2" height="500px" :row-style="rowStyle"
              @cell-mouse-enter="MouseEnter"
              @cell-mouse-leave="MouseLeave">
      <el-table-column prop="qymc" label="企业名称"></el-table-column>
      <el-table-column prop="wglx" label="违规类型" width="100"></el-table-column>
      <el-table-column prop="dw" label="点位"></el-table-column>
      <el-table-column prop="zpsj" label="抓拍时间" width="65"></el-table-column>
    </el-table>
    <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
        :before-close="handleClose"
        append-to-body
    >
      <span>This is a message</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>
    <div class="text-2xl font-bold m-1">验证样式问题 class="@vsui/vue-components-form-designer"</div>
    <div class="vsui-vue-components-form-designer">1233213213</div>
    <whole-hour-selector v-model:hour="hour"></whole-hour-selector>

  </div>
</template>

<script lang="tsx" setup>
import {
  onBeforeUnmount,
  onMounted,
  ref,
  shallowRef,
  Ref,
  ComponentPublicInstance,
  onUnmounted,
  onActivated,
  onDeactivated
} from 'vue'
import {ElMessageBox} from 'element-plus'
import {Delete} from "@element-plus/icons-vue";
import appCofnfig from "../../utils/config";
import WholeHourSelector from "./WholeHourSelector";
console.log(appCofnfig)
const dialogVisible = ref(false)

const hour = ref('')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}

const tableData1 = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const table2Ref: Ref<null | ComponentPublicInstance> = ref(null)
let interval
const rowStyle = ref(
    {
      height: '32px'
    }
)
const tableData2 = ref([
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '未戴厨师帽', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
  {qymc: '覅地方呢地方呢顶顶顶', wglx: '老鼠', dw: '储藏区6', zpsj: '09:06'},
])
const scroll = () => {
  // console.log(table2Ref.value!.$el)
  // console.log(table2Ref.value!.querySelectorAll('.el-table__body'))

  let maxHeight = table2Ref.value!.$el.querySelectorAll('.el-table__body')[0].offsetHeight;
  let clientHeight = table2Ref.value!.$el.clientHeight;
  if (Math.abs(table2Ref.value!.$el.scrollTop - (maxHeight - clientHeight)) < 5) { //预留5像素误差
    table2Ref.value!.$el.scrollTop = 0;
  } else {
    table2Ref.value!.$el.scrollTop += 32;//32是每一行表格的高度，每秒滚一行
  }
}
const MouseEnter = () => {
  //鼠标移入停止滚动
  clearInterval(interval);
}
const MouseLeave = () => {//鼠标离开继续滚动
  interval = setInterval(scroll, 1000);
}

onMounted(() => {
  scroll()
  interval = setInterval(scroll, 1000);
  console.log(interval)
  let ai = setInterval(() => {
    console.log('2s:', ai)
    clearInterval(ai)
    console.log('2s:', ai)
  }, 2000)
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
  // clearInterval(interval);
})
onUnmounted(() => {
  console.log('Unmounted')
  console.log(interval);
  clearInterval(interval);
  console.log(interval);
})
onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  console.log('onActivated')
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  console.log('onDeactivated')
})
console.log(1)
</script>
<style scoped>

.dialog-footer button:first-child {
  margin-right: 10px;
}

.vsui-vue-components-form-designer {
  height: 100px;
  background-color: #0DB565;
}

</style>

